<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>H职场</title>
		<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="lib/bootstrap/js/bootstrap.min.js"></script>
		<script src="js/slide.js"></script>
		<link rel="stylesheet" href="css/slide.css" />
	</head>

	<body>
		<!--轮播图:Carousel-->
		<!--<img src="img/Slider/Slider1.jpg" style="width: 100%; height: 500px; margin-top: -20px;">-->
		<div class="carousel slide" id="mainCarousel">
			<!--轮播图5个远点  ol：有序列表  carousel-indicators：轮播索引-->
			<ol class="carousel-indicators">
				<!--data-slide-to指定该li负责切换到轮播图那一片，索引从0开始
	    		data-target要指定控制的是那个轮播容器的轮播-->
				<li data-slide-to="0" data-target="#mainCarousel" class="active"></li>
				<li data-slide-to="1" data-target="#mainCarousel"></li>
				<li data-slide-to="2" data-target="#mainCarousel"></li>
				<li data-slide-to="3" data-target="#mainCarousel"></li>
			</ol>
			<!--轮播内容-->
			<div class="carousel-inner">
				<div class="item active">
					<a href="#">
						<img src="img/slide/navImg3.jpg" alt="">
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/slide/navImg1.jpg" alt="">
					</a>
				</div>
				<div class="item">
					<a href="#"><img src="img/slide/navImg2.jpg" alt=""></a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/slide/navImg4.jpg" alt="">
					</a>
				</div>
			</div>
			<!--添加俩个超链接 控制滑动到上一页或者下一页，添加类carousel-control：轮播控件
	    		还有用于定位的类left 或right
	    		上一个：previonus 简写prev
	    		下一个：next
	    	-->
			<a href="#" data-target="#mainCarousel" data-slide="prev" class="carousel-control left">
				<samp class="glyphicon glyphicon-chevron-left"></samp>
			</a>
			<a href="#" data-target="#mainCarousel" data-slide="next" class="carousel-control right">
				<samp class="glyphicon glyphicon-chevron-right"></samp>
			</a>
		</div>
	
	</body>

</html>